<template>
    <div>
        <div class="table-header">
            <el-button type="primary" :icon="Plus">添加</el-button>
        </div>
        <el-table border :data="businessData" v-loading="loadding">
            <el-table-column prop="id" label="编号" align="center" width="200px"></el-table-column>
            <el-table-column label="店铺封面" width="100" align="center">
                <template #default="scope" prop="picUrls">
                    <div style="display: flex;justify-content: center">
                        <el-avatar :src="scope.row.cover"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="店铺" align="center"></el-table-column>
            <el-table-column prop="userName" label="账号" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column width="100px" label="详情" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center;justify-content: center">
                        <el-button type="primary" @click="showBusinessDetailsDiaog(scope.row.id)">详情</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="上下架" width="80" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center;justify-content: center">
                        <el-switch v-model="scope.row.uploudGoods"
                                   @change="changeHandler(scope.row.id,$event)"
                                   inline-prompt
                                   :active-icon="Check"
                                   :inactive-icon="Close"/>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <Pagination
                    layout="prev, pager, next"
                    :total="PaginationConfig.total"
                    :page-size="PaginationConfig.pageSize"
                    :page-num="PaginationConfig.pageNum"
                    @pagination="UpdatePage"></Pagination>
        </div>
        <el-dialog v-model="businessDetails.visable" title="商品列表">
            <el-table :data="businessDetails.businessGoodsList">
                <el-table-column property="name" label="名称"/>
                <el-table-column property="description" label="描述"/>
                <el-table-column property="price" label="单价(元)"/>
                <el-table-column label="商品状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.upDown"
                                   inline-prompt
                                   @change="upDownHandler(scope.row.id,$event)"
                                   :active-icon="Check"
                                   :inactive-icon="Close"/>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {getAllBusiness} from "@/api/business";
import {Check, Close, Delete, Edit, Plus} from "@element-plus/icons-vue";
import Pagination from '@/components/Pagination/index.vue'
import {updateBusinessShelves, upDownGoods, userSelectBusinessGoods} from "@/api/user";
import {ElMessage} from "element-plus";

const loadding = ref(true);
const businessData = ref([]);
const PaginationConfig = reactive({
    pageNum: 1,
    pageSize: 8,
    total: 0
})
const businessDetails = reactive({
    visable: false,
    businessId: 0,
    businessGoodsList: []
})
onMounted(() => {
    GetBusinessListHandler();
})

function GetBusinessListHandler() {
    getAllBusiness(PaginationConfig).then((response) => {
        businessData.value = response.data.rows;
        PaginationConfig.total = response.data.total;
        loadding.value = false;
    })
}

function UpdatePage(args) {
    loadding.value = true
    PaginationConfig.pageNum = args.page;
    GetBusinessListHandler();
}

function changeHandler(businessId, val) {
    updateBusinessShelves({businessId: businessId, state: val}).then((response) => {
        ElMessage({
            message: '操作成功',
            type: 'success'
        })
    })
}

function upDownHandler(goodsId, val) {
    upDownGoods(goodsId, val).then((response) => {
        ElMessage({
            message: '操作成功',
            type: 'success'
        })
    })
}

function showBusinessDetailsDiaog(id) {
    if (businessDetails.visable) {
        businessDetails.visable = false;
    } else {
        businessDetails.businessId = id;
        userSelectBusinessGoods(id).then((response) => {
            businessDetails.businessGoodsList = response.data;
            console.log(response)
        })
        businessDetails.visable = true;
    }
}
</script>

<style scoped>
.table-header {
    display: flex;
    justify-content: right;
    padding-bottom: 20px;
}

.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
}
</style>